import React, { useState } from 'react';
import { Content, Switch, Card } from 'react-fule-ui';
export default function FuleSwitch() {
  const [checkedValue, setCheckedValue] = useState(false);
  const getData = (data) => {
    setCheckedValue(data);
  };
  return (
    <Content>
      <Content.Header>Switch</Content.Header>
      <Content.Body>
        <Card>
          <Card.Header>基础使用</Card.Header>
          <Card.Body>
            <div>
              <Switch
                label={`${checkedValue ? '打开' : '关闭'}`}
                onChange={getData}
              />
            </div>
            <div style={{ marginTop: 12 }}>
              <Switch label="我是个开关" value />
            </div>
            <div style={{ marginTop: 12 }}>
              <Switch label="禁止关闭" disabled value={true} />
            </div>
            <div style={{ marginTop: 12 }}>
              <Switch label="禁止打开" disabled />
            </div>
          </Card.Body>
        </Card>
      </Content.Body>
    </Content>
  );
}
